<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>结构化数据</title>
    <script lanuage="javascript">
        // window.onload=function (){
        //     var elementsByName = document.getElementsByName("isRowkey");
        //     for (let i = 0; i < elementsByName.length; i++) {
        //         elementsByName[i].addEventListener("click",
        //             function () {
        //                 var elementsByClassName = document.getElementsByClassName("hbaseField");
        //                 for (let j = 0; j < elementsByClassName.length; j++) {
        //                     elementsByClassName.item(j).removeAttribute("readonly");
        //                     elementsByClassName.item(j).value = "";
        //                 }
        //                 document.getElementById(elementsByName[i].value).value = "Rowkey";
        //                 document.getElementById(elementsByName[i].value).setAttribute("readonly","readonly");
        //             }
        //         );
        //     }
        // };
    </script>
</head>
<body>
<h2>结构化数据的入湖</h2>
<hr>
<div>
    当前选择的HBase数据库地址是：[[${session.hbaseUrl}]] &nbsp;&nbsp;&nbsp;
    <a th:href="@{/data_lake/data_source}"><input type="button" value="修改"></a>
</div>
<form th:action="@{/data_lake/create_json}" id="form" method="post">
    <div>
        请设置HBase表名：<input type="text" name="hbaseTableName">
        <br>
        请设置HBase列族：<input type="text" name="hbaseColumnFamily">
    </div>
    <hr>
    <div>
        <table border="1" cellpadding="4" cellspacing="0" style="text-align: center">
            <tr>
                <th colspan="3">当前入湖的数据源表名是[[${mysqlTableName}]]</th>
            </tr>
            <tr>
                <th>MySql的字段名</th>
                <th>HBase的列名</th>
                <th>是否作为Rowkey</th>
            </tr>
            <tr th:each="field : ${fieldsName}">
                <td><input type="text" style="border: none;" th:value="${field}" name="mysqlField" readonly="readonly"></td>
                <td><input type="text" style="border: none;" class="hbaseField" th:id="${field}"
                           name="hbaseField"></td>
                <td><input type="radio" name="isRowkey" th:value="${field}"></td>
            </tr>
        </table>
    </div>
    <br><br>
    <input type="button" value="上一步">
    <input type="submit" onsubmit="return removeDisabled()" value="下一步">
</form>
</body>
</html>